<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员详情</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bossIndex.css">
    <link rel="stylesheet" href="css/flexible.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/fontsize.js"></script>
    <script src="js/vue/axios.js"></script>
    <script src="js/jquery.md5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/glabe.js"></script>
    <style>
        .beyondHidden{
            display: inline-block;
            width: 100%;
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden; 
        }
        .record_top>div{
            font-size: 0.14rem;
        }
        .card_information{
            font-size: 0.14rem;
        }
    </style>
</head>
<body>
<div class="container_box" id="app">
   <template>
    <div class="group_details head_card_message clearfix" style="padding-right: 0.1rem;">
        <div class="fl head_card" onclick="addMember()">
            <img :src="userMessage.Picurl" onerror="this.src='images/moren.png'" alt="" class="spinning_img">
        </div>
        <div class="spinning_txt fl">
            <p style="margin-bottom: 0.1rem;display: flex;align-items: center;position: relative;">
                <span style="font-size:0.14rem;overflow: hidden;">{{userMessage.Username}}</span>
                <img src="images/women.png"/ v-if="userMessage.Sex == 0" style="width: 0.14rem;height: 0.14rem;margin-left: 0.1rem;">
                <img src="images/man1.png"/ v-else style="width: 0.14rem;height: 0.14rem;margin-left: 0.1rem;">
                <span class="rf" style="position: absolute;right: 0;top: 0.1rem;">
                    <a :href="'tel:'+userMessage.Phone">
                        <img style="height: .2rem;" src="images/phone.png"/>
                    </a>
                </span>
            </p>
            <p style="margin-bottom: 0.1rem;">
                <a :href="'tel:' + userMessage.Phone"><span class="spinning_name">{{userMessage.Phone}}</span></a>
            </p>
        </div>
    </div>
    <div class="tar_qh">
        <ul class="nav">
            <li :class="active == 1 ? 'selected' : ''" @click="selectOption(1)">出勤记录</li>
            <li :class="active == 2 ? 'selected' : ''" @click="selectOption(2)">会员卡</li>
            <li :class="active == 3 ? 'selected' : ''" @click="selectOption(3)">跟进记录</li>
            <li :class="active == 4 ? 'selected' : ''" @click="selectOption(4)">详细信息</li>
        </ul>
        <div class="content">
            <div class="list" v-if="active == 2">
                <div class="first_list" v-for="item in cardList">
                    <div class="card_head">
                        <p class="lf card_title">{{item.Cardname}}</p>
                        <p class="rf" v-if="item.Cardtype == 20">次数卡</p>
                        <p class="rf" v-else-if="item.Cardtype == 10">期限卡</p>
						<p class="rf" v-else-if="item.Cardtype == 70">计时卡</p>
                        <p class="rf" v-else>储值卡</p>
                    </div>
                    <ul class="card_ul">
                        <li>
                            <span class="after_hx">状态</span>
                            <span v-if="item.State == 0">正常</span>
                            <span v-else-if="item.State == 1">停用</span>
                            <span v-else-if="item.State == 2">转让</span>
                            <span v-else-if="item.State == 3">到期</span>
                            <span v-else>请假</span>
                        </li>
                        <li>
                            <span class="after_hx">余额</span> <span>{{item.Surplus}}</span>
                        </li>
                        <li>
                            <span class="after_hx">有效期</span> <span>{{item.term}}</span>
                        </li>
                        <li>
                            <span class="after_hx">入场</span> <span>{{item.SignCharge}}{{item.Surplus_C}}</span>
                        </li>
                        <li>
                            <span class="after_hx">购卡金额</span> <span>￥{{item.Acamount}}</span>
                        </li>
                    </ul>
                    <!-- <div class="card_bottom">
                        <div class="card_bottom_item">充值记录</div>
                        <div class="line"></div>
                        <div class="card_bottom_item">请假记录</div>
                    </div> -->
                </div>
            </div>
            <div  class="list record" v-else-if="active == 1">
                <div class="record_top">
                    <div :class="type == -1 ? 'dateSelect' : ''" @click="dateSelect(-1)">今日</div>
                    <div :class="type == 0 ? 'dateSelect' : ''" @click="dateSelect(0)">近一周</div>
                    <div :class="type == 1 ? 'dateSelect' : ''" @click="dateSelect(1)">近一月</div>
                    <div :class="type == 2 ? 'dateSelect' : ''" @click="dateSelect(2)">所有</div>
                </div>
                <template v-if="attendance.attend.length>0">
                    <div class="record_item">
                        <div class="item_title">
                            <span>累计入场</span>
                            <span>{{attendance.attend.length}}次</span>
                        </div>
                        <div class="item_card">
                            <span>签到入场</span>
                            <span>消费额</span>
                            <span>消费用卡</span>
                        </div>
                        <div class="item_item" v-for="item in attendance.attend">
                            <span>{{item.SignInDate}}</span>
                            <span>{{item.Charge}}</span>
                            <span>{{item.Cardname}}</span>
                        </div>
                        <div class="item_more" @click="admissionMore()">更多</div>
                    </div>
                </template>
                
                <div class="record_item" v-if="attendance.groupNum>0">
                    <div class="item_title">
                        <span>累计团课</span>
                        <span>{{attendance.groupNum}}次</span>
                    </div>
                    <div class="item_card">
                        <span>团课信息</span>
                        <span>消费额</span>
                        <span>消费用卡</span>
                    </div>
                    <template v-for="item in attendance.list">
                        <div class="item_item" v-if="item.Currtype == 0">
                            <p class="p">
                                <span class="beyondHidden">{{item.Ctitle}}({{item.Sname}})</span></br>
                                <span class="beyondHidden">{{item.Signdate.split(' ')[0]}} {{item.Bstime}}-{{item.Betime}}</span>
                            </p>
                            <p>
                                <span>{{item.Charge}}</span></br>
                                <span v-if="item.IsReserve == 0">(未签到)</span>
                                <span v-else-if="item.IsReserve == 1">(已完成)</span>
                                <span v-else>(已取消)</span>
                            </p>
                            <span>{{item.Cardname}}</span>
                        </div>
                    </template>
                    <div class="item_more" @click="groupMore()">更多</div>
                </div>
                <div class="record_item" v-if="attendance.privateNum>0">
                    <div class="item_title">
                        <span>累计私教</span>
                        <span>{{attendance.privateNum}}次</span>
                    </div>
                    <div class="item_card">
                        <span>私教信息</span>
                        <span>消费额</span>
                        <span>消费用卡</span>
                    </div>
                    <template v-for="item in attendance.list">
                        <div class="item_item" v-if="item.Currtype == 1">
                            <p class="p">
                                <span class="beyondHidden">{{item.Ctitle}}({{item.Sname}})</span>
                                <span class="beyondHidden">{{item.Signdate.split(' ')[0]}} {{item.Bstime}}-{{item.Betime}}</span>
                            </p>
                            <p>
                                <span>{{item.Charge}}</span></br>
                                <span v-if="item.IsReserve == 0">(未签到)</span>
                                <span v-else-if="item.IsReserve == 1">(已完成)</span>
                                <span v-else>(已取消)</span>
                            </p>
                            <span>{{item.Cardname}}</span>
                        </div>
                    </template>
                    
                    <div class="item_more" @click="privateMore()">更多</div>
                </div>
            </div>
            <div  class="list " v-else-if="active == 3">
                <div class="add_jl" onclick="addMember()"><img src="images/add_jl.png"></div>
                <template v-if="recording.list.length>0">
                    <div class="gj_Record" v-for="item in recording.list">
                        <div class="lf progress_bar"></div>
                        <div class="gj_message">
                            <div class="gj_title">
                                <p class="lf card_title" v-if="item.Ftype == 0">电话跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 1">微信跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 2">QQ跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 3">短信跟进</p>
                                <p class="lf card_title" v-if="item.Ftype == 4">面谈跟进</p>
                                <p class="rf" style="font-size: 0.14rem;">跟进人：<span>{{item.Sname}}</span></p>
                            </div>
                             <ul class="card_information">
                                <li>
                                    {{item.Info}}
                                </li>
                                <li>
                                    <span>{{item.Addtime}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="addRecording" @click="addRecording()">
                        添加跟进
                    </div>
                </template>
            	<div v-else style="font-size: 0.14rem;">
                    <div style="text-align: center;color: #999999;">暂无更进记录</div>
                    <div class="addRecording" @click="addRecording()">
                        添加跟进
                    </div>
                </div>
            	<!-- <div class="gj_Record">
                    <div class="lf progress_bar"></div>
                    <div class="gj_message">
                        <div class="gj_title">
                            <p class="lf card_title">电话跟进</p>
                            <p class="rf">跟进人：<span>龙龙</span></p>
                        </div>
                        <ul class="card_information">
                            <li> 最近回店里办理会员卡</li>
                            <li>
                                <span>2019-02-20</span> <span>19:20</span>
                            </li>
                        </ul>
                    </div>
            	</div> -->
            </div>
            <div class="list" v-else>
                <div class="line_item" @click="testData()">
                    <span>体测数据</span>
                    <img src="./images/right_icon.png" alt="">
                </div>
                <div class="line_item" @click="basicInfo()">
                    <span>基本信息</span>
                    <div>
                        <span>编辑</span>
                        <img src="./images/right_icon.png" alt="">
                    </div>
                </div>
                <div class="line_item">
                    <span>教练</span>
                    <div>
                        <span>{{userMessage.Coach_name}}</span>
                    </div>
                </div>
                <div class="line_item">
                    <span>维护人</span>
                    <div>
                        <span>{{userMessage.Sale_name}}</span>
                    </div>
                </div>
                <div class="line_item">
                    <span>客户来源</span>
                    <div>
                        <span>{{userMessage.Userfrom_name}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div> 
   </template>
</div>
</body>
<script>
    function addMember(){
        window.location.href="addMember.html"
    }
</script>
<script>
var app = new Vue({
    el: '#app',
    data: {
        active:1,
        //会员信息
        userMessage:{},
        //卡列表
        cardList:{},
        //出勤记录
        attendance:{},
        //出勤日期
        type:-1,
        //会员id
        id:null,
        //更进记录
        recording:{},
    },
    created() {
        //获取路由参数
        let id = getUrlQueryString('id');
        let active = getUrlQueryString('active');
        if(active){
            this.active = active;
        }
        this.id = id;
        //获取会员详情
        axios.get(`mobileapi/boss/user.php?act=edit&uid=${id}`).then(res=>{
            if(res.data.code == 200){
                this.userMessage = res.data.data.user;
            }else{
                vant.Toast(res.data.msg);
            }
        }).catch(err=>{
            vant.Toast('请求发送失败，请重试');
        });
        //获取会员卡信息
        axios.get(`mobileapi/boss/user_card.php?act=card_list&uid=${id}`).then(res=>{
            console.log(res);
            if(res.data.code == 200){
                this.cardList = res.data.data.list;
            }else{
                vant.Toast(res.data.msg);
            }
        }).catch(err=>{
            vant.Toast('请求发送失败，请重试');
        });
        //获取会员出勤记录
        axios.get(`mobileapi/boss/user.php?act=attend&uid=${id}&type=${this.type}`).then(res=>{
            if(res.data.code == 200){
                this.attendance = res.data.data;
            }else{
                vant.Toast(res.data.msg);
            }
        }).catch(err=>{
            vant.Toast('请求发送失败，请重试');
        });
        //获取跟进记录
        axios.get(`mobileapi/boss/follow.php?act=follow_list&uid=${id}`).then(res=>{
            console.log(res);
            if(res.data.code == 200){
                this.recording = res.data.data;
            }else{
                vant.Toast(res.data.msg);
            }
        }).catch(err=>{
            vant.Toast('请求发送失败请重试');
        });
    },
    methods: {
        selectOption(val){
            this.active = val;
        },
        //点击时间段
        dateSelect(val){
            this.type = val;
            //发送请求
            axios.get(`mobileapi/boss/user.php?act=attend&uid=${this.id}&type=${val}`).then(res=>{
                if(res.data.code == 200){
                    this.attendance = res.data.data;
                }else{
                    vant.Toast(res.data.msg);
                }
            }).catch(err=>{
                vant.Toast('请求发送失败，请重试');
            })
        },
        //添加跟进
        addRecording(){
            //跳转页面
            window.location.href=`addVisitorGj.html?id=${this.id}&type=0`;
        },
        //入场更多
        admissionMore(){
            location.href = `RcDetailed.html?id=${this.id}`
        },
        //团课更多
        groupMore(){
            location.href = `TkDetailed.html?id=${this.id}&type=${this.type}`
        },
        //私课更多
        privateMore(){
            location.href = `SkDetailed.html?id=${this.id}`
        },
        //基本信息
        basicInfo(){
            //跳转基本信息页面
            location.href = `addMember.html?id=${this.id}`
        },
        //体测数据页面
        testData(){
            location.href = `Tcrecording.html?id=${this.id}`
        }
    },
})
</script>
</html>